<template>
  <div class="Binhai">
    <p>温州理工滨海校区</p>
    <input type="text" placeholder="请输入查找学号" v-model="studentId"><button @click="search">搜索</button>
    <div v-if="Info">
      <p>学生信息</p>
      <p>学号：{{Info.userNum}}</p>
      <p>姓名：{{Info.name}}</p>
      <p>年龄：{{Info.age}}</p>
      <p>专业：{{Info.major}}</p>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      studentId:"",
      students:[{ userNum:'123456', name:"李小明", age:'18', major:'计算机科学' }],
      Info:null
    }
  },
  methods:{
    search(){
      const student = this.students.find(item => item.userNum === this.studentId);
      if(student)
        this.Info = student;
      else{
        this.Info = null;
        alert("所查找的学生学号不存在！");
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.Binhai{
    color:gray;
}
</style>
